<template>
    <div>
<h3>成绩-----{{ score }}</h3>
<div v-if="score>=90" >优秀</div>
<div v-else-if="score>=80">良好</div>
<div v-else-if="score>=60">及格</div>
<div v-else>不及格</div>


<h3>show演示</h3>
<div v-show="score>=90" >优秀</div>
<div v-show="score>=80">良好</div>

<h3>列表渲染</h3>
<!--列表渲染-->
<ul v-for="(item,index) in movies" :key="item.id">
    <li>{{ item.name }}--{{ item.a }}</li>
</ul>
<h3>表单元素</h3>
<div>显示数据{{ username }}{{ password }}</div>
<div>用户名<input type="text" v-model="username"></div>
<div>密码<input type="password" v-model="password"></div>
<div><button @click="login">登录</button></div>
    </div>
</template>
<script setup>
//条件渲染
import { ref } from 'vue'
let score = ref(90)

//列表渲染
let movies = ref([
    {id:1,name:'流浪地球',a:8.5},
    {id:2,name:'云边有个小卖部',a:8.8},
    {id:3,name:'少年的你',a:8.5},
    {id:4,name:'满江红',a:8.5},
    {id:5,name:'误杀',a:8.5},
])
console.log(movies.value);

//表单
let username = ref('')
let password = ref('')

const login = ()=>{
    console.log(username.value,password.value,'实现登录');
}
</script>
<style scoped>
</style>